<template>
  <div class="edge-property-panel">
    <!-- 基础信息 -->
    <div class="main-info-block">
      <h4 class="panel-title main">基础信息</h4>
      <el-form label-width="120px" class="main-form">
        <el-form-item label="连线ID">
          <el-input v-model="propertyPanel.id" disabled />
        </el-form-item>
        <el-form-item label="连线名称">
          <el-input v-model="propertyPanel.label" @input="onPropertyChange" placeholder="请输入连线名称" />
        </el-form-item>
        <el-form-item label="连线类型">
          <el-input value="顺序流" disabled />
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 条件配置 -->
    <div class="main-info-block">
      <h4 class="panel-title main">条件配置</h4>
      <el-form label-width="120px" class="sub-form">
        <el-form-item label="条件类型">
          <el-radio-group v-model="propertyPanel.conditionType" @change="onPropertyChange">
            <el-radio label="">无条件</el-radio>
            <el-radio label="expression">表达式</el-radio>
            <el-radio label="script">脚本</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="propertyPanel.conditionType === 'expression'">
          <el-form-item label="条件表达式">
            <el-input 
              v-model="propertyPanel.conditionExpression" 
              type="textarea" 
              :rows="3"
              placeholder="例如：${amount > 1000}"
              @input="onPropertyChange" 
            />
          </el-form-item>
        </template>
        <template v-if="propertyPanel.conditionType === 'script'">
          <el-form-item label="脚本语言">
            <el-select v-model="propertyPanel.scriptLanguage" @change="onPropertyChange">
              <el-option label="JavaScript" value="javascript" />
              <el-option label="Groovy" value="groovy" />
              <el-option label="Python" value="python" />
            </el-select>
          </el-form-item>
          <el-form-item label="脚本内容">
            <el-input 
              v-model="propertyPanel.scriptContent" 
              type="textarea" 
              :rows="4"
              placeholder="请输入脚本内容"
              @input="onPropertyChange" 
            />
          </el-form-item>
        </template>
      </el-form>
    </div>
    
    <!-- 高级设置 -->
    <div class="main-info-block">
      <h4 class="panel-title main">高级设置</h4>
      <el-form label-width="120px" class="sub-form">
        <el-form-item label="优先级">
          <el-input-number v-model="propertyPanel.priority" :min="1" :max="100" @change="onPropertyChange" />
        </el-form-item>
        <el-form-item label="跳过表达式">
          <el-input v-model="propertyPanel.skipExpression" placeholder="例如：${skip}" @input="onPropertyChange" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input 
            v-model="propertyPanel.description" 
            type="textarea" 
            :rows="2"
            placeholder="连线描述信息"
            @input="onPropertyChange" 
          />
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 连线样式设置模块 -->
    <div class="main-info-block">
      <h4 class="panel-title main" @click="toggleLineStylePanel" style="cursor: pointer;">
        <span>连线样式</span>
        <span style="float: right; font-size: 14px;">{{ lineStylePanelExpanded ? '▼' : '▶' }}</span>
      </h4>
      <div v-show="lineStylePanelExpanded">
        <LineStyleConfig 
          :line-style="propertyPanel.lineStyle"
          @change="onLineStyleChange"
        />
      </div>
    </div>
    
    <el-button type="danger" size="default" @click="handleDelete" style="margin-top:24px;">删除连线</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LineStyleConfig from './configs/LineStyleConfig.vue'

const props = defineProps({
  edge: Object,
  propertyPanel: Object
})

const emit = defineEmits(['propertyChange', 'delete'])

// 连线样式面板展开状态
const lineStylePanelExpanded = ref(false)

/**
 * 处理属性变更
 */
function onPropertyChange() {
  emit('propertyChange')
}

/**
 * 处理连线样式变更
 */
function onLineStyleChange(lineStyle) {
  props.propertyPanel.lineStyle = lineStyle
  onPropertyChange()
}

/**
 * 处理删除操作
 */
function handleDelete() {
  emit('delete')
}

/**
 * 切换连线样式面板的展开/收起状态
 */
function toggleLineStylePanel() {
  lineStylePanelExpanded.value = !lineStylePanelExpanded.value
}
</script>

<style scoped>
.edge-property-panel {
  width: 100%;
}

.main-info-block {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 18px 12px 12px 12px;
  margin-bottom: 18px;
}

.panel-title.main {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.main-form .el-form-item__label {
  font-weight: bold;
  color: #606266;
}

.sub-form .el-form-item {
  margin-bottom: 12px;
}
</style> 